App.require(function () {
    var app = App.getCurrent();

    app.definePage("pcareaselectactive", {
        render: function (next) {
            this.parent.getOriginData(this.parent.data.initValue, function (options) {
                this.data.options = options;
                for (var i = 0; i < this.data.options.length; i++) {
                    var option = this.data.options[i];
                    option._index = option.index || 1;
                }
                this.fetch("./index.html", function (text) {
                    next(this.renderHTML(text));
                });
            }.bind(this));
        },
        getDomObj: function () {
            this.attachDom(".area-select-detail-container", "container")
                .attachEvent("container", "click", this.clickContainerHandler, false);
        },
        init: function () {
            var uls = this.domList.container.children, options = this.data.options;
            for (var i = 0; i < options.length; i++) {
                var opt = options[i], index = opt._index, ul = uls[i];
                if (ul.children.length > 5) {
                    ul.scrollTop = Math.max(index - 3, 0) * 28;
                }
            }
        },
        clickContainerHandler: function (ev) {
            var target = ev.target, li = Component.getNodeName(target, "LI"), ul = Component.getNodeName(target, "UL");
            if (li && ul) {
                this.changeActive(ul.dataset.index, li.dataset.index);
                this._addlist(parseInt(li.dataset.index), ul, li)
            }
        },
        _addlist: function (index, ul, li) {
            var that = this;
            var ii = parseInt(ul.dataset.index) - 1;
            this.data.options[ii].index = index;
            index = parseInt(ul.dataset.index);
            if (index === this.data.options.length) return;
            else {
                if (typeof this.parent.getNextData !== "function") return;
                this.parent.getNextData(index, li.dataset.value, this._getPrevList(index), function (data) {
                    this.data.options[index].items = data;
                    var nextUl = ul.parentNode.children[index];
                    this.innerHTML(nextUl, '{{each item as items}}' +
                        '<li data-index="{{item.index}}" {{if item.index == 1}}class="area-select-active"{{/if}} data-value="{{item.value}}">{{item.content}}</li>{{/each}}',
                        function () {
                            var ii = parseInt(nextUl.dataset.index) - 1;
                            var index = that.data.options[ii].index;
                            that.data.options[ii]._index = 1;
                            if (index > data.length) index = data.length;
                            that._addlist(index, nextUl, nextUl.children[0]);
                        }, {
                            items: data
                        }
                    );
                }.bind(this));
                
            }
        },
        _getPrevList: function (index) {
            var data =  [];
            for (var i = 0; i < index; i++) {
                var option = this.data.options[i];
                data.push(option.items[option._index - 1].value);
            }
            return data;
        },
        getSelectData: function () {
            var result = [], options = this.data.options;
            for (var i = 0; i < options.length; i++) {
                result.push(options[i].items[options[i]._index - 1]);
            }
            return result;
        },
        changeActive: function (uIndex, lIndex) {
            var uls = this.domList.container.children, options = this.data.options;
            var uInt = parseInt(uIndex) - 1, lInt = parseInt(lIndex), ul = uls[uInt];
            ul.children[options[uInt]._index - 1].classList.remove("area-select-active");
            options[uInt]._index = lInt;
            ul.children[lInt - 1].classList.add("area-select-active");
        }
    })
})